<template>
	<view class="content">
		<view class="imgArea">
			<image v-for="(item,index) of imgList" :key="index" class="imgBox" :src="item" mode=""></image>
			<image class="uploadBox" src="../../static/logo.png" mode="" @click="uploadImg(imgList)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				imgList: ['http://192.168.1.2:3000/imgUploads/pfuV6y6vm1wC2a7725696a7f81b1ea21d6b57bf7b779.jpeg'],
				maxImageLength: 5
			}
		},
		onLoad() {

		},
		methods: {
			uploadImg(dataList) {
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				// 当前数组长度
				const currentLength = dataList.length
				// 本次上传长度
				const aimLength = this.maxImageLength - currentLength
				// 已上传长度
				let upoadLegnth = 0
				uni.chooseImage({
					count: aimLength,
					success: res => {
						uni.hideLoading()
						console.log('res', res)
						res.tempFilePaths.forEach(item => {
							uni.uploadFile({
								filePath: item,
								fileType: 'image',
								name: 'image',
								url: 'http://192.168.1.2:3000/imgUpload',
								success: ures => {
									console.log('upoadLegnth', upoadLegnth)
									let result = JSON.parse(ures.data)
									upoadLegnth++
									if(upoadLegnth == aimLength) uni.hideLoading()
									this.imgList.push(result.url)
								},
								fail: err => {
									uni.hideLoading()
								}
							})
						})
					},
					fail: () => {
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 40rpx;
	}

	.imgArea {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;

		.imgBox {
			display: block;
			width: 160rpx;
			height: 200rpx;
		}
		
		.uploadBox {
			display: block;
			width: 160rpx;
			height: 160rpx;
		}
	}
</style>